<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<button>0</button>
	<button>1</button>
	<button>2</button>
</body>
<script>
	const btns = document.querySelectorAll("button");
	// 1
	// for(var i =0;i<btns.length;i++){
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// console.log(i);
	
	// 相当于：
	// {
	// 	var i =0;
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// {
	// 	var i =1;
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// {
	// 	var i =2;
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// {
	// 	i=3;
	// }
	
	// 2- 解决
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].index = i;
	// 	btns[i].onclick = function(){
	// 		alert(this.index);
	// 	}
	// }
	
	// 3- let
	// for(let i=0;i<btns.length;i++){
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	
	// 相当于
	// {
	// 	let i=0;
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// {
	// 	let i=1;
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// {
	// 	let i=2;
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// {
	// 	let i=3;
	// }
	
	// 4- 闭包
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].onclick = (function(i){
	// 		return function(){
	// 			console.log(i);
	// 		}
	// 	})(i);
	// }
	// 相当于：
	// {
	// 	var i=0;
	// 	btns[i].onclick = (function(i){
	// 		return function(){
	// 			console.log(i);
	// 		}
	// 	})(i);
	// }
	// {
	// 	var i=1;
	// 	btns[i].onclick = (function(i){
	// 		return function(){
	// 			console.log(i);
	// 		}
	// 	})(i);
	// }
	// {
	// 	var i=2;
	// 	btns[i].onclick = (function(i){
	// 		return function(){
	// 			console.log(i);
	// 		}
	// 	})(i);
	// }
	// {
	// 	var i=3;
	// }
	// console.log(i);
	
	
	// 5
	btns.forEach(function(item,index){
		item.onclick = function(){
			console.log(index);
		}
	})
	
	

</script>
</html>